Now we have to add some items to our shop frame.
Let's go to our starter.
Open it up Screen gooey.
Open that up shop frame.
And on the shop frame, I'm going to change the background.
The background color.
So the shot frame selected.
Let's go to background color three.
I'm going to hit that little white dot and hit the purple.
I want to make that purple lighter, but it doesn't go any higher up here, so I'm going to change it
by hand.
I'm going to do 200 on the red.
200 on the green hit.
Och.
That's pretty good.
And on the shop frame, I'm going to hit the plus sign again.
I'm going to do an CC for scrolling frame.
Scrolling frames are cool because you could fit a lot more stuff on there than the size would normally
permit because you have a scroll bar.
Let's change the scrolling frame name to items frame.
And we got a position that right because it's on our top bar.
So let's go down to possession.
I'm just going I'm going to keep the x the same.
So zero and zero for pixel and scale.
I'm going to move the Y down scale .10 pixel offset.
Perfect.
And then for the size, I'm going to stretch that 50% of my window.
So I'll do a 0.5 in the x zero pixel offset.
I want it to go all the way down to the bottom.
But remember, we have 10% of it that's being taken up by the top bar.
So I'm going to do a 0.9 on the Y zero pixel offset.
That's pretty good.
Let's make this transparent so we can see the purple color.
Let's go to background transparency.
Make that one nice.
This bar is too thick, right?
Our scroll bar is too thick, taking up too much real estate.
Let's go and change that.
We're going to find scrollbar thickness.
It's 12 pixels.
I'm going to make it five.
Cool.
Now, if you need to make this scroll frame bigger, go up to canvas size.
You can make the x bigger too.
And then you'd have a scrollbar on the x on the bottom.
Or you can make this y bigger.
Like if you needed to fit a whole bunch of items, it defaults to two times the size of the parent object
or of the the scroll bar, the scroll frame object.
So you could make it like four and it'd be 400% on the Y.
That's pretty convenient, but I'm going to keep it at two and then we'll expand it out if we need to.
All right, on the items frame, I want to add items, so let's hit the plus sign on the items frame.
I'm going to add a.
Let's add a UI list layout first and that's going to take care of where our stuff is going to be organized.
We don't have to match up our positions.
Hit the plus sign again.
Add a text button.
This is going to be an item.
So I'm going to call this item button.
Right?
And they're all going to be called item button.
We're going to add a lot of stuff with code to keep this flexible.
So let's change the size of that.
Well, I see my font might as well change font first, right?
Because I see it.
And we'll go to comic.
That's what we were using.
And there's our text.
Keep the text the same.
We're going to change that with code.
Here's our text scaled.
Go ahead and press that.
Now, let's scroll up and change our size and position.
Since I was there, I just wanted to change it there.
Size position is going to be handled with the UI list layout, so I don't need to do anything there
but the size I'm going to keep the size.
Let's get 100% on the x so one and then zero pixel offset for the x for the Y, I'm going to do a 0.1
and zero pixel offset.
Notice how big that is.
That's because my canvas size is big.
So it's it's 10% of the canvas size, not 10% of the scroll bar or the scroll frame size.
All right.
I'm going to make this transparent, slightly transparent.
Let's where's my transparency?
Oh, background.
Transparency.
Here it is.
I'll make it like 70% transparent.
That way I can kind of see it, but I can still see the purple.
Nice.
And let's go to our items button and I'm going to hit the plus do s t for string value.
And this is going to hold our image.
So when we preview, it's going to show the image that's in the tool.
So I'm going to call this image I d I'll just duplicate that control D We want the name here, so let's
call it item name and then I'm going to add another one for the price.
I'm going to add an int value hit the plus.
And value.
That's going to be the price.
Cool.
Now we'll put our simple pistol stuff in there.
Let's.
Let's scroll up to our replicated storage.
There's our simple pistol.
Here's our texture ID.
This is going to be the image it's going to show in the preview.
We don't have a preview yet, but we will.
If I click on it, I can copy this.
Copy.
And then I'm going to go down here.
I'm going to put my image ID in here.
I need the name.
So you have to make sure you spell it right.
There's a simple pistol.
We don't have a space in there.
We could add a space.
But if you do add a space, you have to change it down here.
I didn't make this too sophisticated.
As do control V got our item name Price.
We're just going to type that in 1000.
Let's add the code that we're going to need for the shop script so that we can at least see the item
correctly.
All right.
So we don't have a lot going on here in the shop script yet.
Let's go ahead and add a variable and I'll do I'll do one for the items frame.
So I'll say items Frame is going to equal shop frame and we'll do a weight for child items frame.
I'm going to do another variable for buttons and we're going to make a table of buttons.
What else will I need?
I'm going to do a for loop.
When the script starts up, it's going to fire off this for loop through for I and V in pairs.
We get my items, frame colon, get children do.
So it's going to get everything on the items frame, including the UI list layout.
So we have to be careful.
I'm going to say v or if v v is the item.
So it's either a UI list layout or a item or a text button.
I'm going to check to see if it is a text button.
Then v dot text is going to equal v dot item.
What do I call that item name?
It's on my button.
It doesn't pop up though.
Oh, remember it's a value two, right?
It's a string value.
And then what happens if we press that button?
Well, we're going to do the activated here, V activated connect, put a function here, and maybe
we'll do a print out or something.
Print V equals v dot.
Item name.
Right o text.
Let's do text.
There we go.
This is just a test we're going to we're going to delete that and then put a node here.
This is where we're going to preview our item preview item, and then I'll pass in the V.
So we're going to do a preview for the button that we press.
And what else am I going to need here?
I'm going to insert I'll do a table insert.
And Buttons is the name of the table.
V is the button.
All right, that's pretty cool.
Let's go ahead and try that out.
Let's hit the play button.
I'm going to go to view.
Output.
When I hit that little bell.
Dang, we hit a pistol.
Oh, look at that simple pistol.
We got the print out.
We don't have a preview yet.
We're going to do it over here.
But let's add another button to this window to see how easy it is.
Let's go over to my zombie game, and here's my items button.
I'm going to do a control D to duplicate it.
I'm going to open that up.
I need to change my ID to the lemon.
Fabulous lemon.
And copy that.
That's my that's the tool.
The tool image.
So what I call that image ID, that's what I want.
Control V So make sure you update your image.
We need the fabulous lemon name.
All right.
Control C.
There's a name Control V.
Remember, there's a space in there that might that might cause a little bit extra work in the future,
but I think it's worth it.
And then we'll call that.
We'll make that 2000.
Now let's play it.
Ding.
Let's see our view output.
And we've got our pistol.
Simple pistol.
Fabulous.
LEMON So you can see that it's going to be easy to expand this.